<template>
  <ElDrawer v-model="opened" size="70%" class="dict-item-top-widget" direction="ltr">
    <ProTable
      title="字典子项列表"
      ref="proTableRef"
      row-key="id"
      :columns="columns"
      :init-param="defaultParam"
      :request-api="loadData"
      highlight-current-row>
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <ElButton type="primary" :icon="CirclePlus" @click="onAddClicked">新增</ElButton>
      </template>
      <!-- 字典操作 -->
      <template #operation="scope">
        <ElButton type="primary" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
        <ElButton type="primary" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
      </template>
    </ProTable>
    <ItemForm ref="formRef" @success="refresh" />
  </ElDrawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { pageDictItem, removeDictItem } from '@api/uc/dict'
import { Dict } from '@api/uc/dict/interface'
import ItemForm from './item-form.vue'
// import { deleteDictItemById } from '@api/uc/dict'
import { FormType } from '@/enums'
const opened = ref(false)
const proTableRef = ref<ProTableInstance>()
// 打开 drawer(新增、查看、编辑)
const formRef = ref<InstanceType<typeof ItemForm> | null>(null)
const defaultParam = reactive({ dictId: '' })
// 表格配置项
const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 60, index: getIndex },
  { prop: 'label', label: '标签名' },
  { prop: 'value', label: '数据值', tag: true },
  { prop: 'type', label: '类型', tag: true },
  { prop: 'description', label: '描述' },
  { prop: 'sortOrder', label: '排序', tag: true },
  { prop: 'remark', label: '备注' },
  { prop: 'operation', label: '操作' }
]

// 获取序号
function getIndex(index: number) {
  const { current, size } = proTableRef.value!.pageable
  return (current - 1) * size + index + 1
}

// 加载数据
function loadData(query: Dict.Query) {
  query.order = 'update_time desc'
  return pageDictItem(query)
}

function open(id: string) {
  opened.value = true
  defaultParam.dictId = id
}

const close: () => void = () => {
  opened.value = false
}

// 刷新列表
function refresh() {
  proTableRef.value?.getTableList()
}

// 添加
function onAddClicked() {
  formRef.value?.open(FormType.ADD, defaultParam.dictId)
}

// 编辑
function onEditClicked(row: any) {
  formRef.value?.open(FormType.EDIT, row.id)
}

// 删除
function onDeleteClicked(row: any) {
  ElMessageBox.confirm('您确定要删除' + row.label + '吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      removeDictItem(row.id).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        proTableRef.value?.getTableList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '删除取消!'
      })
    })
}

defineExpose({
  open,
  close
})
</script>

<style lang="scss">
.dict-item-top-widget > .el-drawer__body {
  padding: 0;

  .card {
    border: none;
    border-radius: 0;
  }
}
</style>
